!-- 百人(千倍合约) -->
<template>
  <el-dialog v-if="props.show" :model-value="props.show" :title="'【百人场】' + data.game_name" top="8vh" width="60%"
    @close="onHideDetails" :close-on-press-escape="false" :destroy-on-close="true" :close-on-click-modal="false">
    <div v-loading="indexStore.moduleLoading">
      <div class="dialogMaxHeight" :class="props.isDisableUser ? 'disableUser' : ''">
        <el-form ref="ruleFormRef" :model="data.currencyInfo" :inline="true" :rules="rules" :scroll-to-error="true">
          <form-item title="游戏名称" value="game_name">
            <GameHeaderInfo :game_id="props.checkedItem.game_id" />
          </form-item>
          <form-item title="币种" :pass="true" value="currency_id">
            <el-select class="formItem280 marginR20" v-model="data.currency_id" filterable @change="chooseCurrency">
              <el-option v-for="(item, index) in data.currencyList" :key="index"
                :label="item.remark + ' (' + item.a_crypto_name + ')' + '-' + item.a_crypto_title" :value="item.id" />
            </el-select>
            <el-button type="warning" @click="data.batchShow = true">批量控制币种</el-button>
            <span class="tipsText">(下拉选择币种查看配置，批量按钮可以多选控制币种的开关)</span>
          </form-item>
          <form-item title="币种开关" value="a_crypto_control">
            <el-radio-group v-model="data.currencyInfo.a_crypto_control" size="large">
              <el-radio-button label="关闭" :value="0" />
              <el-radio-button label="开启" :value="1" />
            </el-radio-group>
            <span class="tipsText">(控制此币种的开启关闭，关闭后客户端不再展示此币种)</span>
          </form-item>
          <form-item title="简称" value="a_crypto_name">
            <span class="box-title">{{ data.currencyInfo.a_crypto_name }}</span>
            <span class="tipsText">(币种的简称)</span>
          </form-item>
          <form-item title="全称" value="a_crypto_title">
            <span class="box-title">{{ data.currencyInfo.a_crypto_title }}</span>
            <span class="tipsText">(币种的完整名称显示)</span>
          </form-item>
          <form-item title="显示的小数位数" :pass="true" value="a_crypto_precision">
            <el-input-number v-model="data.currencyInfo.a_crypto_precision" :min="0" :max="99999999999999999999"
              :precision="0" placeholder="显示的小数位数" clearable controls-position="right" />
            <span class="tipsText">(币种在客户端的小数位数展示)</span>
          </form-item>
          <form-item title="bust_buffer值" :pass="true" value="a_crypto_bust_buffer" v-if="!indexStore.is_general_agent">
            <el-input-number class="formItem240" v-model="data.currencyInfo.a_crypto_bust_buffer" :min="0"
              :max="99999999999999999999" placeholder="bust_buffer值" clearable controls-position="right" />
            <span class="tipsText">(用于控制爆仓价格的系数因子)</span>
          </form-item>
          <form-item title="最低下注额度" :pass="true" value="a_crypto_min_user_position">
            <el-input-number class="formItem240" v-model="data.currencyInfo.a_crypto_min_user_position"
              :min="-99999999999999999999" :max="99999999999999999999" placeholder="最低下注额度" clearable
              controls-position="right" />
            <span class="tipsText">(玩家总下注此币种的最低额度，下注*杠杆倍数)</span>
          </form-item>
          <form-item title="用户最大持仓量" :pass="true" value="a_crypto_max_user_position">
            <el-input-number class="formItem240" v-model="data.currencyInfo.a_crypto_max_user_position" :min="0"
              :max="99999999999999999999" placeholder="用户最大持仓量" clearable controls-position="right" />
            <span class="tipsText">(玩家对于此币种同时持有的上限额度)</span>
          </form-item>
          <form-item title="持仓时间小时上限" :pass="true" value="a_crypto_holding_time">
            <el-input-number class="formItem240" v-model="data.currencyInfo.a_crypto_holding_time" :min="0"
              :max="99999999999999999999" :precision="0" placeholder="持仓时间小时上限" clearable controls-position="right" />
            <span class="tipsText">(玩家对于此币种持仓时间小时上限)</span>
          </form-item>
        </el-form>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer" v-show="!props.isDisableUser">
        <el-button type="info" @click="onHideDetails">取 消</el-button>
        <el-button type="primary" @click="gameSet(ruleFormRef)">确 定</el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 批量控制货币 -->
  <el-dialog :model-value="data.batchShow" :title="data.game_name" :close-on-click-modal="false"
    :close-on-press-escape="false" top="24vh" width="50%" @close="onHideDetails">
    <div class="dialogMaxHeight" :class="props.isDisableUser ? 'disableUser' : ''">
      <form-item title="币种" :pass="true" value="currency_id">
        <el-select class="imWidth100" v-model="data.currency_ids" multiple filterable>
          <el-option v-for="(item, index) in data.currencyList" :key="index"
            :label="item.remark + ' (' + item.a_crypto_name + ')' + '-' + item.a_crypto_title" :value="item.id" />
        </el-select>
      </form-item>
      <form-item title="币种开关" value="crypto_control">
        <el-radio-group v-model="data.crypto_control" size="large">
          <el-radio-button label="关闭" :value="0" />
          <el-radio-button label="开启" :value="1" />
        </el-radio-group>
      </form-item>
    </div>
    <template #footer v-show="!props.isDisableUser">
      <div class="dialog-footer">
        <el-button type="info" @click="onHideDetails">取 消</el-button>
        <el-button type="primary" @click="batchCurrency">确 定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { getThousandCurrency, editThousandCurrency, editBatchThousand } from '@/api/game'
import GameHeaderInfo from '@/components/FormItem/GameHeaderInfo.vue'
import { throttle } from '@/utils/index'

import { useStore } from '@/stores/index'
const indexStore = useStore()

const props = defineProps({
  show: {
    type: Boolean,
    default: () => {
      return false
    }
  },
  isDisableUser: {
    type: Boolean,
    default: () => {
      return false
    }
  },
  checkedItem: {
    type: Object,
    default: () => {
      return {}
    }
  }
})

watch(
  () => [props.checkedItem, props.show],
  async (value) => {
    if (value[0]) {
      Object.assign(data, props.checkedItem)
    }
    if (value[1]) {
      getSearchList(props.checkedItem.agent_id) // 获取运营商货币(千倍配置跟着货币走)
    }
  }
)

const data = reactive({
  id: 0,
  game_id: 0,
  agent_id: 0,
  game_name: '',
  currency_id: 0,
  currencyInfo: {
    id: 0, // 货币
    a_crypto_name: '', // 简称
    a_crypto_title: '', // 全称
    a_crypto_control: 0,// 币种开关
    a_crypto_precision: 0,// 此币种在游戏内显示的小数位数
    a_crypto_bust_buffer: 0,// 爆仓公式因数
    a_crypto_min_user_position: 0,// 最低下注额度，此币种的最多下注额度，杠杆后
    a_crypto_max_user_position: 0,// 用户最大持仓量;用户当前持有此币种的最大值
    a_crypto_holding_time: 24,// 持仓时间小时上限
  } as any,
  currencyList: [] as any[], // 运营商货币
  batchShow: false,
  currency_ids: [],
  crypto_control: 1
})

// 获取运营商货币
const getSearchList = async (id: number) => {
  let res = await getThousandCurrency({ agent_id: id });
  data.currencyList = res.data.list
  data.currency_id = res.data.list[0].id
  data.currencyInfo = res.data.list[0]
}

// 选择货币
const chooseCurrency = () => {
  data.currencyList.forEach((item: any) => {
    if (item.id == data.currency_id) {
      data.currencyInfo = item
    }
  })
}

// 选择批量修改货币
const batchCurrency = () => {
  let msg = '';
  if (!data.currency_ids.length) {
    return ElMessage.error('请选择货币')
  }
  data.currencyList.forEach((item: any) => {
    data.currency_ids.forEach((second: number) => {
      if (item.id == second) {
        msg += item.remark + '(' + item.a_crypto_name + ') '
      }
    })
  })
  ElMessageBox.confirm('是否批量修改 ' + msg, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消'
  }).then(async () => {
    await editBatchThousand({
      agent_id: data.agent_id,
      ids: data.currency_ids,
      a_crypto_control: data.crypto_control,
    })
    ElMessage.success('批量修改成功')
    onHideDetails()
  }).catch(() => { })
}

const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules<typeof data.currencyInfo>>({
  a_crypto_precision: [{ required: true, message: '请输入此币种在游戏内显示的小数位数', trigger: 'blur' }],
  a_crypto_min_user_position: [{ required: true, message: '请输入最低下注额度', trigger: 'blur' }],
  a_crypto_max_user_position: [{ required: true, message: '请输入用户最大持仓量', trigger: 'blur' }],
})
const gameSet = throttle(async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      await editThousandCurrency(data.currencyInfo);
      ElMessage.success('修改成功')
      emit('onHideDetails', true)
    }
  })
}, 3000)

// 重置
const emit = defineEmits(['onHideDetails'])
const onHideDetails = () => {
  if (data.batchShow) {
    data.batchShow = false
    data.currency_ids = []
    data.crypto_control = 0
  } else {
    emit('onHideDetails', false)
  }
}
</script>

<style scoped lang="scss"></style>